import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import {login} from '../../utils/api'

class Login extends React.Component {
    state = {
        layout:{
            labelCol: {
                span: 8,
            },
            wrapperCol: {
                span: 16,
            },
        },
        tailLayout : {
            wrapperCol: {
                offset: 8,
                span: 16,
            }
        }
    }
    onFinish = values => {
        console.log('Success:', values);
        login(values).then(data=>{
           if(data){
               localStorage.setItem('crmUserInfo',JSON.stringify(data))
               // 正常时需要把信息也存到 redux中的
               this.props.history.push('/org')
           }
        })
    };
    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    render() {
        return <div className='login_box'>
            <Form
                {...this.state.layout}
                name="basic"
                initialValues={{
                    remember: true,
                }}
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}
            >
                <Form.Item
                    label="Username"
                    name="account"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item {...this.state.tailLayout} name="remember" valuePropName="checked">
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <Form.Item {...this.state.tailLayout}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </div>
    }
}
export default Login
